<template>
  <el-drawer
    title="查看成绩"
    :visible="visible"
    direction="rtl"
    size="60%"
    :wrapper-closable="false"
    :before-close="handlerClose"
  >
    <div class="drawer-body">
      <div>
        <user :row="examInfo"></user>
      </div>
      <el-table
        v-loading="loading"
        :data="datas"
        class="table-wrapper"
      >
        <el-table-column
          prop="paper_title"
          label="试卷名称"
        >
        </el-table-column>
        <el-table-column
          prop="paper_score"
          label="总分数"
        >
        </el-table-column>
        <el-table-column
          prop="user_score"
          label="得分"
        >
        </el-table-column>
        <el-table-column
          prop="time_takes"
          label="用时"
        >
        </el-table-column>
        <el-table-column
          prop="topic_count"
          label="题目总数"
        >
        </el-table-column>
        <el-table-column
          prop="right_count"
          label="正确数"
        >
        </el-table-column>
        <el-table-column
          prop="commit_time"
          label="交卷时间"
        >
        </el-table-column>
      </el-table>
    </div>
  </el-drawer>
</template>

<script>
import User from '@/pages/user/student/account/components/user.vue';

export default {
  name: 'ExamInfoDrawer',
  components: {
    User
  },
  props: {
    visible: {
      type: Boolean,
      require: true
    },
    examInfo: {
      type: Object,
      require: true,
      default: _ => {
        return {}
      }
    }
  },
  data() {
    return {
      drawer: false,
      loading: true,
      datas: []
    }
  },
  created() {
    this.getAllRecord()
  },
  methods: {
    // 关闭弹出层
    handlerClose() {
      this.$emit('update:visible', false);
    },
    // 获取考试记录
    getAllRecord() {
      this.loading = true
      this.$http.get(
          '/exam/admin/paper/' + this.examInfo.paper_id + '/student/' + this.examInfo.user_id + '/record',
          {},
          ({ data }) => {
            this.loading = false
            this.datas = data
          },
          ({ msg }) => {
            this.loading = false
            this.$message.error(msg)
          }
      )
    }
  }
}

</script>

<style scoped lang="scss">
.drawer-body {
  padding: 0 20px;
}

.table-wrapper {
  //margin: 0 50px 32px 20px;
  margin-top: 10px;
  ::v-deep .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
    font-size: 12px;
    line-height: 1;
    margin-left: 10px;
  }

  ::v-deep .el-table {
    color: #333;
  }

  ::v-deep .el-table thead {
    color: #999;
  }

  ::v-deep thead.has-gutter th,
  ::v-deep thead th {
    background-color: #f6f9ff;
  }

  .el-icon-rank {
    font-size: 16px;
    cursor: move;
    margin-right: 5px;
  }
}
</style>
